<template>
  <div class="drawContainer">

    <div class="mapToolBar">
      <div class="title-bar" style="width: 20%;">
        <img class="title-icon" :src="require('@/assets/icon-svg2/ICON-title.svg')"/>
        <span class="title-text"> <span>管网建设</span> </span>
      </div>

      <div class="mapToolBarContainer">
    <el-button @click="handleClick" style="margin: 20px 50px;">测试</el-button>
        <div @click="layerControl">图层</div>
        <div>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" style="color: #FFFFFF;"
               @click="e => e.preventDefault()">
              管网工具
              <a-icon type="caret-down"/>
            </a>

            <a-menu slot="overlay" style="margin: 5px 0;">
              <a-sub-menu key="Point" title="管点编辑">
              </a-sub-menu>
              <a-sub-menu key="PolyLine" title="管线编辑">
                <a-menu-item v-show="!polyLineEditing"><a @click="startEditLine">开始编辑</a></a-menu-item>
                <a-menu-item v-show="polyLineEditing"><a @click="saveEditLine">保存编辑</a></a-menu-item>
                <a-menu-divider/>
                <a-menu-item v-show="polyLineEditing"><a @click="cancelEditLine">结束编辑</a></a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="Polygon" title="区域编辑">
              </a-sub-menu>
            </a-menu>
          </a-dropdown>
        </div>
        <div @click="editLayer">{{ editLayerText }}</div>
        <div @click="showLayerTable">表格</div>
        <div @click="showDetail">属性</div>
        <!-- <div @click="related">关联</div> -->

        <a-divider type="vertical" style="padding: 0 !important;"/>
        <img class="mapToolBarIcon" src="@/assets/icon-svg2/icon-draw.svg"/>
        <a-divider type="vertical" style="padding: 0 !important;"/>
        <div @click="pan" style="padding-left: 0;">平移</div>
        <div @click="catchOne"
             v-show="operatedStatusText == '编辑'"
             class="operatedStatusClass"
             style="cursor: no-drop">
          捕捉
        </div>
        <div @click="drawPoint"
             v-show="operatedStatusText == '编辑'"
             class="operatedStatusClass"
             style="cursor: no-drop">
          管点
        </div>
        <div @click="drawLine"
             v-show="operatedStatusText == '编辑'"
             class="operatedStatusClass"
             style="cursor: no-drop">
          管线
        </div>
        <div @click="drawPolygon"
             v-show="operatedStatusText == '编辑'"
             class="operatedStatusClass"
             style="cursor: no-drop">
          平面
        </div>
        <div @click="drawStyle"
             v-show="operatedStatusText == '编辑'"
             class="operatedStatusClass"
             style="cursor: no-drop">
          样式
        </div>
        <!-- <div @click="modifyFeature" v-show="operatedStatusText=='编辑'" class="operatedStatusClass" style="cursor: no-drop;">编辑</div> -->
        <div @click="save" v-show="operatedStatusText == '编辑'" class="operatedStatusClass" style="cursor: no-drop">
          保存
        </div>
        <div @click="clean">清除</div>
        <div @click="localToCenter">中心点</div>
      </div>
    </div>

    <div class="mapStatusBar">
      <div>【当前选中：{{ selectedFeature.featureId }}】</div>
      <div>【状态：{{ operatedStatusText }}】</div>
    </div>

    <div id="mapContainer" class="mapContainer">
      <OlMapN ref="olMapN"
              :mapId="'pipeDrawMap'"
              v-bind:baseMapData="baseMapData"
              v-bind:featuresData="featuresData"
              v-bind:pointImgUrlMapData="device_type_imgUrlMap"
              v-bind:lineWidth="borderWidth"
              v-bind:lineColor="linecolors"
              v-bind:fillColor="fillColor"/>
    </div>

    <MapPopup ref="refMapPopup">
      <!--图层弹窗内容-->
      <div style="display: none;" id="map-layer-box">
        <div :style="{maxHeight: '462px', overflowY: 'auto'}">
          <a-tree v-model="checkedKeys"
                  checkable
                  :expanded-keys="expandedKeys"
                  :auto-expand-parent="autoExpandParent"
                  :selected-keys="selectedKeys"
                  :tree-data="treeData"
                  @expand="onExpand"
                  @select="onSelect"
                  @check="onCheck"/>
        </div>
      </div>
    </MapPopup>

    <div id="mapPopContainer" class="mapPopContainer">
      <div class="title-bar">
        <!--<img class="title-icon" :src="require('@/assets/icon-svg2/ICON-title.svg')"/>-->
        <a-icon class="title-icon" :type="popContainnerShowMap.showLayerTable?'table' : 'profile'"/>
        <span class="title-text">
          <span>{{ popTitle }}</span>
        </span>
        <!--<img class="title-icon" style="margin: 0 5px 0 auto" src="@/assets/icon-svg2/icon-close.svg" @click="closePop"/>-->
        <a-icon class="title-icon" style="font-size: 16px;margin: 0 5px 0 auto;"
                type="close" @click="closePop"/>
      </div>
      <div ref="mapPopContainerDiv" class="mapPopContainerDiv">
        <!-- 图层控制 -->
        <!--<div v-show="popContainnerShowMap.layerControl">-->
        <!--<a-tree v-model="checkedKeys"-->
        <!--checkable-->
        <!--:expanded-keys="expandedKeys"-->
        <!--:auto-expand-parent="autoExpandParent"-->
        <!--:selected-keys="selectedKeys"-->
        <!--:tree-data="treeData"-->
        <!--@expand="onExpand"-->
        <!--@select="onSelect"-->
        <!--@check="onCheck"/>-->
        <!--</div>-->

        <!-- 表格 -->
        <div v-show="popContainnerShowMap.showLayerTable">
          <!-- 简单的下拉开始 -->
          <div class="drapDiv">
            <a-select size="small" v-model="selectedLayerId" style="width: 110px" @change="onSelectChange">
              <a-select-option v-for="option in layerOptions"
                               v-bind:value="option.id" v-bind:key="option.id">{{ option.layerName }}
              </a-select-option>
            </a-select>
            <!-- 简单的下拉结束 -->
            <!-- 按钮组开始 -->
            <!-- <a-button style="margin-left: 10px" @click="newLayer()">新建图层</a-button>
            <a-button style="margin-left: 10px">
              <a-popconfirm title="确定删除?" @confirm="() => deleteLayer()">
                <a href="javascript:;">删除图层</a>
              </a-popconfirm>
            </a-button> -->

            <a-input size="small" placeholder="请输入ID/名称" v-model="searchValue" allowClear
                     style="width: 185px;margin: 0 10px;"/>

            <a-button size="small" type="primary" @click="handleTableDataSearch">查询</a-button>
          </div>
          <!-- 按钮组结束 -->

          <!-- 表格开始 -->
          <div class="tableDiv" style="margin-top: 5px;">
            <a-table size="small" bordered
                     :columns="columns"
                     :data-source="tableData"
                     :pagination="{ pageSize: 20, showQuickJumper: true, showSizeChanger: false }"
                     :scroll="{ y: 580 }" :customRow="rowClick">
              <template slot="operation" slot-scope="text, record">
                <!-- <a href="javascript:;" @click="showEditFeature(record)">编辑</a>
                <a-divider type="vertical" /> -->
                <a-popconfirm title="确定删除?" @confirm="() => onDelete(record)">
                  <a href="javascript:;">删除</a>
                </a-popconfirm>
              </template>
            </a-table>
          </div>
          <!-- 表格结束 -->
        </div>
        <!-- 属性 -->
        <div v-show="popContainnerShowMap.showDetail">
          <a-form v-if="modalTitle === '编辑要素' && editType === 'Point'"
                  :ref="'Point'"
                  :id="'Point'"
                  class="ant-advanced-search-form"
                  :form="form"
                  :label-col="{ span: 9 }"
                  :wrapper-col="{ span: 15 }"
                  @submit="handleSearch">
            <a-row
                :style="{ height: '32px', textAlign: 'left', lineHeight: '32px', fontSize: '16px', fontWeight: 'bold' }">
              节点属性
            </a-row>
            <a-row :gutter="24">
              <a-col v-for="i in pointinputdata" :key="i.name" :span="12" :style="{ display: 'block', height: '46px' }">
                <a-form-item v-if="i.inputType && i.inputType != 'input'" :label="i.name">
                  <a-date-picker v-if="i.inputType === 'date-picker'"
                                 v-decorator="[i.type + 'Obj',{rules: [{required: i.required,message: `请选择${i.name}`,},],},]"
                                 @change="(date, dateString) => {form.setFieldsValue({ [i.type]: dateString })}"/>
                  <a-radio-group v-if="i.inputType === 'radio'"
                                 v-decorator="[i.type, {initialValue: i.options[0].value, rules: [{required: i.required,message: `请选择${i.name}`,},],},]"
                                 @change="(e) => {form.setFieldsValue({ [i.type]: e.target.value }) }">
                    <a-radio v-for="option in i.options" :key="option.value" :value="option.value">
                      {{ option.text }}
                    </a-radio>
                  </a-radio-group>
                  <a-select v-if="i.inputType === 'select' && i.options && i.options.length"
                            v-decorator="[i.type,{initialValue: i.options[0].value, rules: [{required: i.required, message: `请选择${i.name}`,},],},]"
                            @change="(value) => {form.setFieldsValue({ [i.type]: value }) }">
                    <a-select-option v-for="option in i.options" :value="option.value" :key="option.value">
                      {{ option.text }}
                    </a-select-option>
                  </a-select>
                  <a-input v-decorator="[i.type,{rules: [{required: i.required, message: `请选择${i.name}`,},],},]"
                           :placeholder="i.name" :type="'hidden'"/>
                </a-form-item>
                <a-form-item v-else :label="i.name">
                  <a-input v-decorator="[i.type,{rules: [{required: i.required,message: `请输入${i.name}`,},],},]"
                           :placeholder="i.name" :disabled="i.disabled"
                           @change="(e) => { if (i.limit === 'number' && '' != e.target.value.replace(/\d{1,}\.{0,1}\d{0,}/, '')) {
                          e.target.value = e.target.value.match(/\d{1,}\.{0,1}\d{0,}/) == null? '' : e.target.value.match(/\d{1,}\.{0,1}\d{0,}/) }}"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="height: 46px" v-show="operatedStatusText == '编辑'">
              <a-col :span="24" :style="{ textAlign: 'center' }">
                <a-button @click="handleReset">清除</a-button>
                <a-button :style="{ marginLeft: '8px' }" type="primary" html-type="submit">提交</a-button>
              </a-col>
            </a-row>
          </a-form>
          <a-form v-if="modalTitle === '编辑要素' && editType === 'LineString'"
                  :ref="'LineString'"
                  :id="'LineString'"
                  class="ant-advanced-search-form"
                  :form="form"
                  :label-col="{ span: 9 }"
                  :wrapper-col="{ span: 15 }"
                  @submit="handleSearch">
            <a-row
                :style="{ height: '32px', textAlign: 'left', lineHeight: '32px', fontSize: '16px', fontWeight: 'bold' }">
              管网属性
            </a-row>
            <a-row :gutter="24">
              <a-col v-for="i in lineinputdata" :key="i.name" :span="12" :style="{ display: 'block', height: '46px' }">
                <a-form-item v-if="i.inputType && i.inputType != 'input'" :label="i.name">
                  <a-date-picker v-if="i.inputType === 'date-picker'"
                                 v-decorator="[i.type + 'Obj',{rules: [{required: i.required, message: `请选择${i.name}`,},],},]"
                                 @change="(date, dateString) => {form.setFieldsValue({ [i.type]: dateString }) }"/>
                  <a-radio-group v-if="i.inputType === 'radio'"
                                 v-decorator="[i.type,{initialValue: i.options[0].value,rules: [{required: i.required, message: `请选择${i.name}`,},],},]"
                                 @change="(e) => {form.setFieldsValue({ [i.type]: e.target.value }) }">
                    <a-radio v-for="option in i.options" :key="option.value" :value="option.value">
                      {{ option.text }}
                    </a-radio>
                  </a-radio-group>
                  <a-select v-if="i.inputType === 'select' && i.options && i.options.length"
                            v-decorator="[i.type,{initialValue: i.options[0].value, rules: [{required: i.required,message: `请选择${i.name}`,},],},]"
                            @change="(value) => {form.setFieldsValue({ [i.type]: value }) }">

                    <a-select-option v-for="option in i.options" :value="option.value" :key="option.value">
                      {{ option.text }}
                    </a-select-option>
                  </a-select>
                  <a-input v-decorator="[i.type,{rules: [{required: i.required, message: `请选择${i.name}`,},],},]"
                           :placeholder="i.name" :disabled="i.disabled" :type="'hidden'"/>
                </a-form-item>
                <a-form-item v-else :label="i.name">
                  <a-input v-decorator="[i.type,{rules: [{required: i.required, message: `请输入${i.name}`,},],},]"
                           :placeholder="i.name" :disabled="i.disabled"/>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row
                :style="{ height: '32px', textAlign: 'left', lineHeight: '32px', fontSize: '16px', fontWeight: 'bold' }">
              GIS管网绘制属性
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="线颜色">
                  <a-popover title="线颜色" placement="right" trigger="click">
                    <template slot="content">
                      <sketch-picker v-model="linecolors"/>
                    </template>
                    <a-button :style="{ 'background-color': this.linecolors.hex }"></a-button>
                  </a-popover>
                </a-form-item>
              </a-col>
              <a-col :span="12" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="线宽">
                  <a-input-number :min="0" :step="0.1" v-model="lineWidth"/>
                </a-form-item>
              </a-col>
              <!-- <a-col :span="16" :style="{ display:'block',height:'46px'}">
                <a-form-item label="坐标数据">
                  <a-textarea placeholder="坐标数据" :rows="1" v-model="coor" disabled />
                </a-form-item>
              </a-col>-->
            </a-row>
            <a-row style="height: 46px" v-show="operatedStatusText == '编辑'">
              <a-col :span="24" :style="{ textAlign: 'center' }">
                <a-button @click="handleReset">清除</a-button>
                <a-button :style="{ marginLeft: '8px' }" type="primary" html-type="submit">提交</a-button>
              </a-col>
            </a-row>
          </a-form>
          <a-form v-if="modalTitle === '编辑要素' && editType === 'Polygon'"
                  :ref="'Polygon'"
                  :id="'Polygon'"
                  class="ant-advanced-search-form"
                  :form="form"
                  :label-col="{ span: 8 }"
                  :wrapper-col="{ span: 16 }"
                  @submit="handleSearch">
            <a-row
                :style="{ height: '32px', textAlign: 'left', lineHeight: '32px', fontSize: '16px', fontWeight: 'bold' }">
              DMA属性
            </a-row>
            <a-row :gutter="24">
              <a-col :span="16" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="编号">
                  <a-input
                      v-decorator="['number',{rules: [{required: true, message: '请输入编号',},],},]"
                      placeholder="编号"/>
                </a-form-item>
              </a-col>
              <a-col :span="16" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="名称">
                  <a-input v-decorator="['name',{rules: [{required: true, message: '请输入名称',},],},]"
                           placeholder="名称"/>
                </a-form-item>
              </a-col>
              <a-col :span="16" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="填充颜色">
                  <a-popover title="填充颜色" placement="right" trigger="click">
                    <template slot="content">
                      <sketch-picker v-model="fillColor"/>
                    </template>
                    <a-button :style="{ 'background-color': this.fillColor.hex }"></a-button>
                  </a-popover>
                </a-form-item>
              </a-col>
              <a-col :span="16" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="边框颜色">
                  <a-popover title="边框颜色" placement="right" trigger="click">
                    <template slot="content">
                      <sketch-picker v-model="linecolors"/>
                    </template>
                    <a-button :style="{ 'background-color': this.linecolors.hex }"></a-button>
                  </a-popover>
                </a-form-item>
              </a-col>
              <a-col :span="16" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="边框宽度">
                  <a-input-number :min="0" :step="0.1" v-model="borderWidth"/>
                </a-form-item>
              </a-col>
              <!-- <a-col :span="16" :style="{ display:'block',height:'46px'}">
                <a-form-item label="坐标数据">
                  <a-textarea placeholder="坐标数据" :rows="1" v-model="coor" disabled />
                </a-form-item>
              </a-col>-->
            </a-row>
            <a-row style="height: 46px" v-show="operatedStatusText == '编辑'">
              <a-col :span="24" :style="{ textAlign: 'center' }">
                <a-button @click="handleReset">清除</a-button>
                <a-button :style="{ marginLeft: '8px' }" type="primary" html-type="submit">提交</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 关联 -->
        <!-- <div v-show="popContainnerShowMap.related">related</div> -->
        <!-- 样式 -->
        <div v-show="popContainnerShowMap.style">
          <a-form class="ant-advanced-search-form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-row :gutter="24">
              <a-col :span="16" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="填充颜色">
                  <a-popover title="填充颜色" placement="right" trigger="click">
                    <template slot="content">
                      <sketch-picker v-model="fillColor"/>
                    </template>
                    <a-button :style="{ 'background-color': this.fillColor.hex }"></a-button>
                  </a-popover>
                </a-form-item>
              </a-col>
              <a-col :span="16" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="线段/边框颜色">
                  <a-popover title="线段/边框颜色" placement="right" trigger="click">
                    <template slot="content">
                      <sketch-picker v-model="linecolors"/>
                    </template>
                    <a-button :style="{ 'background-color': this.linecolors.hex }"></a-button>
                  </a-popover>
                </a-form-item>
              </a-col>
              <a-col :span="16" :style="{ display: 'block', height: '46px' }">
                <a-form-item label="线段/边框宽度">
                  <a-input-number :min="0" :step="0.1" v-model="borderWidth"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
    </div>

    <a-modal v-model="visible" :title="modalTitle" :width="modalWidth" :footer="null">
      <a-form-model v-if="modalTitle === '新建图层'"
                    ref="ruleForm_newLayer"
                    :model="ruleForm_newLayer"
                    :rules="rules_newLayer"
                    v-bind="layout_newLayer">
        <a-form-model-item label="图层名称" prop="layerName">
          <a-input v-model="ruleForm_newLayer.layerName" placeholder="图层名称"/>
        </a-form-model-item>
        <a-form-model-item label="图层类型" prop="layerType">
          <a-select v-model="ruleForm_newLayer.layerType" @change="handleChangeLayerType">
            <a-select-option value="TILE">切片图层</a-select-option>
            <a-select-option value="VECTOR">矢量图层</a-select-option>
            <a-select-option value="IMAGE">图片图层</a-select-option>
            <a-select-option value="HEATMAP">热度图层</a-select-option>
            <a-select-option value="WEBGL">WebGL图层</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="图层服务URL">
          <a-input v-model="ruleForm_newLayer.layerUrl" placeholder="图层服务URL"/>
        </a-form-model-item>
        <a-form-model-item label="是否底图图层">
          <a-radio-group v-model="ruleForm_newLayer.izBased">
            <a-radio :value="0">否</a-radio>
            <a-radio :value="1">是</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="是否启用">
          <a-radio-group v-model="ruleForm_newLayer.status">
            <a-radio :value="0">否</a-radio>
            <a-radio :value="1">是</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="存储对象类型">
          <a-select v-model="ruleForm_newLayer.storageType"
                    @change="onSelectStorageType"
                    placeholder="存储对象类型"
                    notFoundContent="暂无数据">
            <a-select-option v-for="option in device_type" v-bind:value="option.value" v-bind:key="option.value">
              {{ option.text }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button style="margin-left: 90px" type="primary"
                    @click="submitFormNewLayer('ruleForm_newLayer')">提交
          </a-button>
          <a-button style="margin-left: 70px" @click="resetForm('ruleForm_newLayer')">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import OlMapN from '@/components/olMap/OlMapN'
  import moment from 'moment'
  import {Sketch} from 'vue-color'
  import {addGisData} from '@/api/leakage/gisdata'
  import MapPopup from './components/MapPopup'
  import {testPoint} from '@/api/leakage/gisPoint'
  import {testLine} from '@/api/leakage/gisLine'

  import {
    getDictItems,
    addLayer,
    deleteLayer,
    getLayerList,
    getFeaturesByLayerId,
    saveFeature,
    deleteFeature,
    getPointById,
    addPoint,
    updatePoint,
    getLineById,
    addLine,
    updateLine,
  } from '@/api/leakage/gisdata'

  //数据字典数据
  //管道材质
  let pipe_material = []
  //管道口径
  let pipe_diameter = []
  //设备类型
  let device_type = []
  // 流向
  let flow_direction = [
    {value: 0, text: '与起点到终点方向一致'},
    {value: 1, text: '与起点到终点方向相反'},
  ]

  export default {
    name: 'PipeNetworkDraw1',
    components: {'sketch-picker': Sketch, OlMapN, MapPopup},
    computed: {},
    data() {
      return {
        //数据字典数据
        //管道材质
        pipe_material: [],
        //管道口径
        pipe_diameter: [],
        //设备类型
        device_type: [],
        //设备类型imgUrlMap
        device_type_imgUrlMap: {},
        //当前选中要素
        selectedFeature: {},
        // 是否正在编辑管线
        polyLineEditing: false,
        //编辑按钮文字
        editLayerText: '编辑',
        //当前操作状态
        operatedStatusTFlag: 'false',
        operatedStatusText: '浏览',
        //右边窗口的标题
        popTitle: '',
        popContainnerShowMap: {
          layerControl: false,
          showLayerTable: false,
          showDetail: false,
          related: false,
          style: false,
        },
        searchValue: undefined,
        //图层控制开始
        expandedKeys: [],
        autoExpandParent: true,
        checkedKeys: [],
        selectedKeys: [],
        disabledKey: null,
        treeData: [],
        //图层控制结束

        //所有图层的id集合
        layerIdArr: [],
        //地图底图
        baseMapData: {},
        //传到地图里面的要素集
        featuresData: [],
        //图层列表下拉
        selectedLayerId: '',
        layerOptions: [],
        layerNameMap: {},
        //图层列表下拉
        //列表开始
        columns: [
          {
            title: '#', dataIndex: 'rowIndex', align: 'center', width: 40,
            customRender(t, r, i) {
              return i + 1
            }
          },
          {title: '所属图层', dataIndex: 'layerName', align: 'center', width: 90},
          {title: '要素类型', dataIndex: 'typeName', align: 'center', width: 80},
          {title: 'ID/名称', dataIndex: 'idName',},
          {
            title: '操作', dataIndex: 'operation', align: 'center', width: 50, scopedSlots: {customRender: 'operation'},
          },
        ],
        tableData: [],
        //列表结束
        //模态框开始
        visible: false,
        modalTitle: '编辑要素',
        modalWidth: '',
        //新建图层开始
        ruleForm_newLayer: {
          layerName: '',
          layerType: 'TILE',
          layerUrl: '',
          izBased: 0,
          status: 1,
          storageType: undefined,
        },
        rules_newLayer: {
          layerName: [{required: true, message: '请输入图层名称', trigger: 'change'}],
          layerType: [{required: true, message: '请选择图层类型', trigger: 'change'}],
        },
        layout_newLayer: {
          labelCol: {span: 6},
          wrapperCol: {span: 16},
        },
        //新建图层结束
        //编辑要素开始
        editType: '',
        isEdit: false,
        editResult: null,
        form: this.$form.createForm(this, {name: 'advanced_search'}),
        editFeatureId: '',
        coor: '',
        //点
        pointimgurl: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png',
        pointX: '',
        pointY: '',
        pointinputdata: [],
        //线
        lineWidth: 1,
        linecolors: {
          hex: '#D0021B',
          rgba: {r: 208, g: 2, b: 27, a: 0.5},
          a: 0.5,
        },
        lineinputdata: [],
        //面
        borderWidth: 1,
        fillColor: {
          hex: '#3BB973',
          hsl: {h: 147, s: 0.52, l: 0.48, a: 0.5},
          hsv: {h: 147, s: 0.68, v: 0.73, a: 0.5},
          rgba: {r: 59, g: 185, b: 115, a: 0.5},
          a: 0.5,
        },
        //编辑要素结束
        //模态框结束
      }
    },
    async mounted() {
      //管道材质
      this.dataLoader(
        getDictItems,
        'pipe_material',
        function (res) {
          this.pipe_material = pipe_material = res.result
          //管道口径
          this.dataLoader(
            getDictItems,
            'pipe_diameter',
            function (res) {
              this.pipe_diameter = pipe_diameter = res.result
              //设备类型
              this.dataLoader(
                getDictItems,
                'device_type',
                function (res) {
                  this.device_type = device_type = res.result
                  this.pointinputdata = this.getPointInputData()
                  this.lineinputdata = this.getLineInputData()
                  let imgUrlMap = {}
                  if (device_type != null) {
                    for (let i = 0; i < device_type.length; i++) {
                      imgUrlMap[device_type[i].value] = device_type[i].description
                    }
                  }
                  this.device_type_imgUrlMap = imgUrlMap
                  //获取图层列表
                  this.dataLoader(
                    getLayerList,
                    function (res) {
                      let wfsUrls = []
                      let layerIdArr = []
                      this.layerOptions = res.result.records
                      this.layerOptions.forEach((element) => {
                        if (element.status == 1) {
                          if (element.category == 'BASE') {
                            this.baseMapData = element
                          }
                          if (element.category == 'NET') {
                            this.selectedLayerId = element.id
                          }
                          if (element.category == 'ETC' && element.url) {
                            wfsUrls.push({
                              id: element.id,
                              url: element.url,
                              layers: element.layers,
                              layerName: element.layerName,
                            })
                          }
                          element.key = element.id
                          element.title = element.layerName
                          this.layerNameMap[element.id] = element.layerName
                          layerIdArr.push(element.id)
                        }
                      })
                      console.log(this.baseMapData)
                      this.layerIdArr = layerIdArr
                      let that = this
                      //获取所有图层的所有要素
                      this.getFeaturesByLayerIds(this.layerIdArr, () => {
                        for (let wfsKey = 0; wfsKey < wfsUrls.length; wfsKey++) {
                          this.$refs.olMapN.getFeaturesByWFSUrl(
                            wfsUrls[wfsKey].url,
                            wfsUrls[wfsKey].layers,
                            wfsUrls[wfsKey].id,
                            wfsUrls[wfsKey].layerName,
                            (res) => {
                              that.rtFeaturesData = that.rtFeaturesData.concat([res])
                            }
                          )
                        }
                      })
                    }.bind(this)
                  )
                }.bind(this)
              )
            }.bind(this)
          )
        }.bind(this)
      )
    },
    methods: {
      handleClick(){
        testLine().then(res=>{

        })
      },
      //打开属性面板
      openPop(title) {
        this.closeMapPopupWindow()
        this.popTitle = title
        // let mapDiv = document.getElementById('mapContainer')
        // mapDiv.style.width = '72%'
        let popDiv = document.getElementById('mapPopContainer')
        popDiv.style.width = '28%'
        popDiv.style.display = 'block'
      },
      //关闭属性面板
      closePop() {
        // let mapDiv = document.getElementById('mapContainer')
        // mapDiv.style.width = '100%'
        let popDiv = document.getElementById('mapPopContainer')
        popDiv.style.width = '0%'
        popDiv.style.display = 'none'
      },
      //数据加载器
      async dataLoader() {
        let argsArr = []
        for (let i = 0; i < arguments.length; i++) {
          argsArr.push(arguments[i])
        }
        if (typeof argsArr[0] != 'function' || typeof argsArr[argsArr.length - 1] != 'function') {
          console.log('return...')
          return
        }
        let paramStr = ''
        for (let j = 0; j < argsArr.length; j++) {
          if (j != 0 && j != argsArr.length - 1) {
            paramStr += '"' + argsArr[j] + '",'
          }
        }
        paramStr = paramStr.substring(0, paramStr.length - 1)
        await eval('argsArr[0](' + paramStr + ')').then((res) => {
          argsArr[argsArr.length - 1](res)
        })
      },
      //获取图层列表
      getLayerList(callback) {
        this.dataLoader(
          getLayerList,
          function (res) {
            let layerIdArr = []
            this.layerOptions = res.result.records
            this.layerOptions.forEach((element) => {
              element.key = element.id
              element.title = element.layerName
              this.layerNameMap[element.id] = element.layerName
              layerIdArr.push(element.id)
            })
            this.layerIdArr = layerIdArr
            if (callback) {
              callback()
            }
          }.bind(this)
        )
      },
      //获取图层对应的要素列表
      getFeaturesByLayerIds(ids, callback) {
        this.dataLoader(
          getFeaturesByLayerId,
          ids,
          function (res) {
            let result = res.result
            for (let i = 0; i < result.length; i++) {
              let layerId = result[i].layerId
              let layerName = this.layerNameMap[layerId]
              let features = result[i].features
              for (let j = 0; j < features.length; j++) {
                features[j].layerId = layerId
                features[j].layerName = layerName
                // features[j].idName = features[j].id+(features[j].name===null?"":'/'+features[j].name);
                features[j].idName = features[j].name === null ? features[j].id : features[j].name
                features[j].key = features[j].id
              }
            }
            this.rtFeaturesData = result
            let resData = (this.tableData = this.featuresData = this.getFeatureDataByLayerId(this.selectedLayerId))
            if (callback) {
              callback(resData)
            }
          }.bind(this)
        )
      },
      //根据图层id从缓存中获取对应的要素
      getFeatureDataByLayerId(layerId) {
        let result = this.rtFeaturesData
        let featuresData = []
        for (let i = 0; i < result.length; i++) {
          let layerIdd = result[i].layerId
          let features = result[i].features
          for (let j = 0; j < features.length; j++) {
            if (layerIdd === layerId) {
              featuresData.push(features[j])
            }
          }
        }
        return featuresData
      },

      getPointInputData() {
        return [
          {type: 'feature', name: '设施名称', required: true},
          {type: 'scode', name: '设施类别', required: true, inputType: 'select', options: device_type},
          // { type: 'areaId', name: '区域ID', required: false },
          {type: 'x', name: 'X坐标', required: true, disabled: true, limit: 'number'},
          {type: 'y', name: 'Y坐标', required: true, disabled: true, limit: 'number'},
          {type: 'expNo', name: '点号', required: true},
          {type: 'address', name: '位置', required: true},
          {type: 'road', name: '所在道路', required: false},
          {type: 'deep', name: '埋深', required: false, limit: 'number'},
          {type: 'geom', name: '地理坐标', required: false, disabled: true},
          {type: 'h', name: '高程', required: false, limit: 'number'},
          {type: 'mdate', name: '建设年代', required: false, inputType: 'date-picker'},
          {
            type: 'onoff',
            name: '开关状态',
            required: false,
            inputType: 'radio',
            options: [
              {value: '1', text: '开启'},
              {value: '0', text: '关闭'},
            ],
          },
          // { type: 'icon', name: '图标', required: false },
          // { type: 'iconUrl', name: '图标URL', required: false },
          // { type: 'id', name: 'ID', required: false },
          {type: 'keytype', name: '钥匙型号', required: false},
          {type: 'kind', name: '闸门种类', required: false},
          {type: 'maker', name: '生产厂家', required: false},
          {type: 'mapnumber', name: '图幅号', required: false},
          {type: 'meterial', name: '材质', required: false, inputType: 'select', options: pipe_material},
          // { type: 'nodeName', name: '节点名称', required: false },
          // { type: 'nodePurpose', name: '节点用途', required: false },
          {type: 'nodeType', name: '节点类型', required: false},
          {type: 'pId', name: '工程号', required: false},
          {type: 'pno', name: '设施编号', required: false},
          {type: 'roadtype', name: '路面类型', required: false},
          {type: 'rotang', name: '旋转角度', required: false, limit: 'number'},
          {type: 'setup', name: '是否安装', required: false},
          {type: 'spec', name: '规格', required: false},
          {type: 'staurs', name: '目前状况', required: false},
          {type: 'wdeep', name: '井深', required: false, limit: 'number'},
          {type: 'detail', name: '详情', required: false},
          {type: 'remark', name: '备注', required: false},
        ]
      },
      getLineInputData() {
        return [
          {type: 'dS', name: '管径', required: true, inputType: 'select', options: pipe_diameter},
          {type: 'material', name: '材质', required: true, inputType: 'select', options: pipe_material},
          {type: 'sPoint', name: '起点编号', required: true},
          {type: 'ePoint', name: '终点编号', required: true},
          {type: 'address', name: '地址', required: true},
          {type: 'flowD', name: '流向', required: true, inputType: 'select', options: flow_direction},
          {type: 'geom', name: '地理坐标', required: true, disabled: true},
          {type: 'lineLength', name: '管线长度', required: false},
          // { type: 'lineWidth', name: '线段宽度', required: true },
          {type: 'sDeep', name: '起点埋深', required: false},
          {type: 'eDeep', name: '终点埋深', required: false},
          {type: 'mdate', name: '建设年代', required: false, inputType: 'date-picker'},
          {type: 'cdate', name: '验收日期', required: false, inputType: 'date-picker'},
          {type: 'road', name: '所在道路', required: false},
          // { type: 'id', name: 'ID', required: false },
          {type: 'pId', name: '工程号', required: false},
          {type: 'detail', name: '详情', required: false},
          {type: 'remark', name: '备注', required: false},
        ]
      },
      //编辑图层
      editLayer() {
        this.editLayerText = this.editLayerText == '浏览' ? '编辑' : '浏览'
        this.operatedStatusText = this.operatedStatusText == '浏览' ? '编辑' : '浏览'
        let operatedStatusClassTabs = document.getElementsByClassName('operatedStatusClass')
        for (let i = 0; i < operatedStatusClassTabs.length; i++) {
          operatedStatusClassTabs[i].style.cursor =
            operatedStatusClassTabs[i].style.cursor == 'no-drop' ? 'pointer' : 'no-drop'
          // operatedStatusClassTabs[i].style.background = operatedStatusClassTabs[i].style.background==''?'gray':''
        }
      },
      showMapPopupWindow(icon, title, targetId, width = 256) {
        this.$refs.refMapPopup.showFull(icon, title, targetId, width)
      },
      closeMapPopupWindow() {
        this.$refs.refMapPopup.closePopup()
      },
      //图层控制开始
      layerControl() {
        for (let key in this.popContainnerShowMap) {
          this.popContainnerShowMap[key] = false
        }
        this.popContainnerShowMap.layerControl = true
        // this.openPop('图层')
        this.showMapPopupWindow('block', '选择图层', 'map-layer-box')

        let checkedKeysStr = JSON.stringify(this.checkedKeys)
        let valStr = JSON.stringify(this.layerOptions)
        //处理图层控制数据
        let layerControlData = JSON.parse(valStr)
        this.disabledKey = this.selectedLayerId
        this.expandedKeys = ['0-0-0']
        this.checkedKeys = JSON.parse(checkedKeysStr).concat([this.selectedLayerId])
        layerControlData.forEach((element) => {
          if (element.key === this.disabledKey || element.category === 'BASE') {
            element.disabled = true
            this.checkedKeys = this.checkedKeys.concat([element.key])
          } else {
            element.disabled = false
          }
        })
        this.treeData = [
          {
            title: '所有图层',
            key: '0-0-0',
            children: layerControlData,
          },
        ]
      },
      startEditLine() {
        this.$refs.olMapN.startEditLine()
        this.polyLineEditing = true
      },
      cancelEditLine() {
        this.$refs.olMapN.cancelEditLine()
        this.polyLineEditing = false
      },
      saveEditLine() {
        this.$refs.olMapN.saveEditLine()
      },
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onCheck(checkedKeys) {
        this.checkedKeys = checkedKeys
        let rtKeys = []
        checkedKeys.forEach((element) => {
          if (element != '0-0-0') {
            rtKeys.push(element)
          }
        })
        this.$refs.olMapN.removeHighlightFeature()
        this.layerControlSeletc(rtKeys)
      },
      onSelect(selectedKeys, info) {
        // console.log('onSelect', info);
        // this.selectedKeys = selectedKeys;
      },
      layerControlSeletc(ids) {
        let arr = []
        for (let i = 0; i < ids.length; i++) {
          let data = this.getFeatureDataByLayerId(ids[i])
          arr = arr.concat(data)
        }
        this.featuresData = arr
      },
      //图层控制结束

      //表格
      showLayerTable() {
        for (let key in this.popContainnerShowMap) {
          this.popContainnerShowMap[key] = false
        }
        this.popContainnerShowMap.showLayerTable = true
        this.openPop('表格')
      },
      //下拉框触发方法
      onSelectChange(e) {
        this.tableData = this.featuresData = this.getFeatureDataByLayerId(this.selectedLayerId)
        this.checkedKeys = []
        this.$refs.olMapN.removeHighlightFeature()
      },
      // 表格搜索
      handleTableDataSearch() {
        if (this.searchValue) {
          const cacheData = this.tableData.slice(0)
          this.tableData = cacheData.filter(item => {
            return (item.name && item.name.indexOf(this.searchValue) != -1) ||
              (item.id && item.id.indexOf(this.searchValue) != -1)
          })
        } else {
          this.getFeaturesByLayerIds(this.layerIdArr)
        }
      },
      //新建图层
      newLayer() {
        this.modalTitle = '新建图层'
        this.modalWidth = '625px'
        //弹出模态框
        this.showModal()
      },
      //删除图层
      async deleteLayer() {
        await deleteLayer(this.selectedLayerId)
          .then((res) => {
            this.$message.success(res.message)
            this.getLayerList(
              function () {
                this.selectedLayerId = this.layerIdArr[0]
                this.getFeaturesByLayerIds(this.layerIdArr)
              }.bind(this)
            )
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
      },
      //表格点击行触发方法
      rowClick(record, index) {
        return {
          on: {
            click: () => {
              // console.log('rowClick,,,' ,record, index);
              this.$refs.olMapN.localToFeature(record.typeKey, record.id)
            },
          },
        }
      },
      //表格编辑操作
      async onEdit(record) {
      },
      //表格删除操作
      async onDelete(record) {
        let param = {
          layerId: this.selectedLayerId,
          data: [
            {
              target: record.typeKey == 'LINE' ? 'LINESTRING' : record.typeKey,
              id: record.id,
            },
          ],
        }
        // console.log('onDelete,,,',record), param;
        await deleteFeature(param)
          .then((res) => {
            this.$message.success(res.message)
            this.getFeaturesByLayerIds(this.layerIdArr)
            this.$refs.olMapN.removeHighlightFeature()
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
      },
      //模态框开始
      showModal() {
        this.visible = true
      },
      hideModal() {
        // console.log(e);
        this.visible = false
      },
      submitFormNewLayer(formName) {
        this.$refs.ruleForm_newLayer.validate((valid) => {
          // console.log(this.ruleForm_newLayer)
          if (valid) {
            let param = {
              // "id": "",
              izBased: this.ruleForm_newLayer.izBased,
              layerName: this.ruleForm_newLayer.layerName,
              layerType: this.ruleForm_newLayer.layerType,
              layerUrl: this.ruleForm_newLayer.layerUrl,
              status: this.ruleForm_newLayer.status,
              storageType: this.ruleForm_newLayer.storageType || '',
            }
            addLayer(param)
              .then((res) => {
                this.$message.success(res.message)
                this.hideModal()
                this.getLayerList()
              })
              .catch((err) => {
                this.$message.success(err.message)
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      handleChangeLayerType(value) {
        // this.ruleForm_newLayer.layerType = value;
      },
      onSelectStorageType(value) {
        // console.log("onSelectStorageType,,,",value)
        // this.ruleForm_newLayer.storageType = value;
      },
      //编辑要素开始
      //提交表单
      submitForm(formName) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (this.coor) {
              let params = {
                geom: this.coor,
                gisType: 'point',
                id: this.ruleForm.number,
                name: this.ruleForm.name,
                type: this.type,
                fillColor: null,
                strokeColor: null,
                borderWidth: null,
                lineWidth: null,
                nodeIconUrl: this.pointimgurl,
              }
              addGisData(params)
                .then((res) => {
                  this.$message.success(res.message)
                })
                .catch((err) => {
                  this.$message.error(err.message)
                })
            } else {
              this.$notification.warning({
                message: '提示',
                description: '请先在地图上绘制坐标数据！',
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //清空form表单
      handleReset() {
        this.form.resetFields()
        if (this.editType === 'Point') {
          this.$refs.Point.form.setFieldsValue({x: this.pointX, y: this.pointY})
        }
      },
      // 点击提交后需要调用接口提交数据
      handleSearch(e) {
        e.preventDefault()
        let type = e.target.getAttribute('id')
        this.form.validateFields(
          function (error, values) {
            // console.log('error', error)
            // console.log('Received values of form: ', values, type);
            if (error === null) {
              if (this.editType === 'Point') {
                if (this.isEdit) {
                  //修改
                  for (let key in this.editResult) {
                    if (values[key]) {
                      this.editResult[key] = values[key]
                    }
                  }
                  this.editResult['deep'] = parseFloat(this.editResult['deep'])
                  this.editResult['h'] = parseFloat(this.editResult['h'])
                  this.editResult['x'] = parseFloat(this.editResult['x'])
                  this.editResult['y'] = parseFloat(this.editResult['y'])
                  this.editResult['rotang'] = parseFloat(this.editResult['rotang'])
                  this.editResult['wdeep'] = parseFloat(this.editResult['wdeep'])
                  this.editResult['mdate'] = this.editResult['mdateObj']
                  this.editResult['mdateObj'] = undefined
                  updatePoint(this.editResult)
                    .then(
                      function (res) {
                        this.$message.success(res.message)
                        this.visible = false
                        this.$refs.olMapN.changePointStyle(
                          this.editResult.id,
                          this.device_type_imgUrlMap[this.editResult.scode]
                        )
                      }.bind(this)
                    )
                    .catch((err) => {
                      this.$message.error(err.message)
                    })
                } else {
                  //新增
                  addPoint(values)
                    .then((res) => {
                      // console.log(res)
                      this.$message.success(res.message)
                      this.visible = false
                    })
                    .catch((err) => {
                      this.$message.error(err.message)
                    })
                }
              } else if (this.editType === 'LineString') {
                if (this.isEdit) {
                  //修改
                  // console.log(this.editResult)
                  for (let key in this.editResult) {
                    if (values[key]) {
                      this.editResult[key] = values[key]
                    }
                  }
                  this.editResult['lineColor'] =
                    'rgba(' +
                    this.linecolors.rgba.r +
                    ',' +
                    this.linecolors.rgba.g +
                    ',' +
                    this.linecolors.rgba.b +
                    ',' +
                    this.linecolors.rgba.a +
                    ')'
                  this.editResult['lineWidth'] = this.lineWidth
                  updateLine(this.editResult)
                    .then((res) => {
                      // console.log(res)
                      this.$message.success(res.message)
                      this.visible = false
                      this.$refs.olMapN.changeLineStyle(
                        this.editResult.id,
                        this.editResult['lineColor'],
                        this.editResult['lineWidth']
                      )
                    })
                    .catch((err) => {
                      this.$message.error(err.message)
                    })
                } else {
                  //新增
                  addLine(values)
                    .then((res) => {
                      // console.log(res)
                      this.$message.success(res.message)
                      this.visible = false
                    })
                    .catch((err) => {
                      this.$message.error(err.message)
                    })
                }
              } else if (this.editType === 'Polygon') {
                if (this.isEdit) {
                  //修改
                } else {
                  //新增
                }
              }
            }
          }.bind(this)
        )
      },
      showEditFeature(record) {
        let feature = this.$refs.olMapN.getFeatureById(record.id)
        this.onDblClick(feature)
      },
      hex2Rgba(hex) {
        try {
          let hexArr = hex.replace('rgba(', '').replace(')', '').split(',')
          return {r: hexArr[0], g: hexArr[1], b: hexArr[2], a: hexArr[3]}
        } catch (error) {
          return {r: 255, g: 255, b: 255, a: 0.5}
        }
      },
      onDblClick(feature) {
        // if(!this.showToolBar){
        //   return
        // }
        this.handleReset()
        // this.visible = true;
        this.modalTitle = '编辑要素'
        this.modalWidth = '750px'
        this.editFeatureId = feature.featureId
        this.coor = feature.geom
        let lColor = JSON.parse(JSON.stringify(this.linecolors))
        let fColor = JSON.parse(JSON.stringify(this.fillColor))
        lColor.hex = feature.lineColor || feature.borderColor
        lColor.rgba = this.hex2Rgba(lColor.hex)
        fColor.hex = feature.fillColor
        fColor.rgba = this.hex2Rgba(fColor.hex)
        this.linecolors = lColor
        this.fillColor = fColor
        this.lineWidth = feature.lineWidth || feature.borderWidth || 1
        this.borderWidth = feature.lineWidth || feature.borderWidth || 1
        this.editType = feature.getGeometry().getType()
        this.isEdit = false
        this.editResult = null
        if (this.editType === 'Point') {
          const geoms = feature.geom.replace('[', '').replace(']', '').split(',')
          this.pointX = geoms[0]
          this.pointY = geoms[1]
          this.getPointById(
            this.editFeatureId,
            function (result) {
              if (result != null) {
                this.isEdit = true
                this.editResult = result
                result.mdateObj = result.mdate === null ? null : moment(result.mdate, 'YYYY-MM-DD')
                result.x = this.pointX
                result.y = this.pointY
                let timeOut = setTimeout(
                  function () {
                    this.$refs.Point.form.setFieldsValue(result)
                    timeOut = undefined
                  }.bind(this),
                  10
                )
              }
            }.bind(this)
          )
        }
        if (this.editType === 'LineString') {
          this.getLineById(
            this.editFeatureId,
            function (result) {
              if (result != null) {
                this.isEdit = true
                this.editResult = result
                result.mdateObj = result.mdate === null ? null : moment(result.mdate, 'YYYY-MM-DD')
                result.cdateObj = result.cdate === null ? null : moment(result.cdate, 'YYYY-MM-DD')
                let timeOut = setTimeout(
                  function () {
                    this.$refs.LineString.form.setFieldsValue(result)
                    timeOut = undefined
                  }.bind(this),
                  10
                )
              }
            }.bind(this)
          )
        }
      },
      getPointById(id, callback) {
        getPointById(id).then((res) => {
          // console.log(res.result);
          if (callback) {
            callback(res.result)
          }
        })
      },
      getLineById(id, callback) {
        getLineById(id).then((res) => {
          // console.log(res.result)
          if (callback) {
            callback(res.result)
          }
        })
      },
      //编辑要素结束
      //保存新增要素
      async saveFeature(features) {
        let param = {}
        param.layerId = this.selectedLayerId
        let data = []
        features.forEach((element) => {
          // console.log(element)
          let dataObj = {}
          dataObj.target = element.getGeometry().getType()
          dataObj.geom = element.geom
          dataObj.lineWidth = element.strokeWidth
          dataObj.lineColor = element.strokeColor
          dataObj.borderWidth = element.strokeWidth
          dataObj.borderColor = element.strokeColor
          dataObj.fillColor = element.fillColor

          data.push(dataObj)
        })
        if (data.length == 0) {
          this.$message.error('请先描绘要素！')
          return
        }
        param.data = data
        // console.log(param);
        await saveFeature(param)
          .then((res) => {
            this.$message.success(res.message)
            this.getFeaturesByLayerIds(this.layerIdArr)
            this.$refs.olMapN.drawCancel()
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
      },
      //属性
      showDetail() {
        for (let key in this.popContainnerShowMap) {
          this.popContainnerShowMap[key] = false
        }
        this.popContainnerShowMap.showDetail = true
        this.openPop('属性')
      },
      //关联
      related() {
        for (let key in this.popContainnerShowMap) {
          this.popContainnerShowMap[key] = false
        }
        this.popContainnerShowMap.related = true
        this.openPop('关联')
      },
      pan() {
        this.$refs.olMapN.panMap()
      },
      catchOne() {
        this.$refs.olMapN.deleteDrawedFeature()
      },
      drawPoint() {
        this.$refs.olMapN.drawMapPoint()
      },
      drawLine() {
        this.$refs.olMapN.drawMapLineString()
      },
      drawPolygon() {
        this.$refs.olMapN.drawMapPolygon()
      },
      drawStyle() {
        for (let key in this.popContainnerShowMap) {
          this.popContainnerShowMap[key] = false
        }
        this.popContainnerShowMap.style = true
        this.openPop('样式')
      },
      modifyFeature() {
        this.$refs.olMapN.modifyFeature()
      },
      save() {
        this.$refs.olMapN.drawSave()
      },
      clean() {
        this.$refs.olMapN.drawCancel()
      },
      localToCenter() {
        this.$refs.olMapN.localToXY(this.baseMapData.center.split(',')[0], this.baseMapData.center.split(',')[1])
      },
    },
  }
</script>

<style lang="scss" scoped>
  //@import '@/assets/less/comment-style.less';

  .drawContainer {
    width: 100%;
    height: 100%;
  }

  .drawContainer .mapToolBar {
    width: 100%;
    height: 35px;
    background: #1890ff;
    display: flex;
    color: #FFFFFF;
    align-items: center;
    /*border-bottom: red 2px solid;*/
    margin-bottom: 2px;
    font-size: 14px;
  }

  .drawContainer .mapToolBarIcon {
    width: 20px;
    height: 20px;
  }

  .drawContainer .mapToolBar div {
    /*float: left;*/
    display: flex;
    align-items: center;
  }

  .drawContainer .mapToolBar .mapToolBarContainer {
    /*border-right: yellow solid 2px;*/
    /*padding: 0 10px;*/
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .drawContainer .mapToolBar .mapToolBarContainer div {
    padding-left: 10px;
    cursor: pointer;
  }

  .drawContainer .mapToolBar .mapToolBarContainer div:last-child {
    padding-right: 10px;
  }

  .drawContainer .mapStatusBar {
    width: 100%;
    height: 30px;
    background: #fff;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 2px;
    margin-bottom: 2px;
  }

  .drawContainer .mapStatusBar div {
    font-size: 15px;
    font-weight: bold;
  }

  .drawContainer .mapStatusBar div:last-child {
    position: absolute;
    right: 0;
  }

  .drawContainer .mapContainer {
    width: 100%;
    height: calc(100vh - 185px);
    float: left;
    background-color: #FFFFFF;
  }

  .drawContainer .mapPopContainer {
    background-color: #FFFFFF;
    float: left;
    width: 0%;
    height: calc(100vh - 185px);
    display: none;
    /*padding-left: 5px;*/
    position: absolute;
    right: 0;
  }

  .drawContainer .mapPopContainer .mapPopContainerDiv {
    padding: 5px;
  }

  /*板块标题样式*/
  .drawContainer .mapPopContainer .title-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    background: #1890ff;
    margin-left: auto;
  }

  .drawContainer .mapPopContainer .title-bar .title-icon {
    width: 25px;
    height: 25px;
    /*margin-left: 5px;*/
    font-size: 18px;
    color: #FFFFFF;
    padding: 5px 0;
  }

  .drawContainer .mapPopContainer .title-bar .title-icon2 {
    width: 30px;
    height: 30px;
    margin: 0 5px 0 5px;
  }

  .drawContainer .mapPopContainer .title-bar .title-tools {
    margin-left: auto;
    display: flex;
    padding: 0 10px 0 0;
  }

  .drawContainer .mapPopContainer .title-bar .title-text {
    font-size: 14px;
    color: #FFFFFF;
    margin-left: 5px;
  }

  .drawContainer .mapPopContainer .title-bar .close {
    font-size: 14px;
    color: #FFFFFF;
    margin-left: auto;
    margin-right: 10px;
    cursor: pointer;
  }

  .tools-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    background-color: #FFFFFF;
    box-shadow: 0 0 1px #FFFFFF inset;
  }

  .tools-bar .tools-bar-radio {
    padding: 0 5px 0 5px;
  }

  .tools-bar .tools-bar-datepicker {
    padding: 0 5px 0 5px;
  }

  .tools-bar .tools-bar-select {
    padding: 0 5px 0 5px;
  }
</style>
